<template>
  <div class="row audio-list-item">
    <q-img width="140px" height="80px" :src="audio.coverImage" />
    <div class="q-ml-sm fit column col justify-around no-wrap">
      <div class="video-title one-line-text">{{ audio.title }}</div>
      <div class="row">
        <q-avatar style="width:18px;height:18px">
          <q-img :src="audio.creatorAvatar" />
        </q-avatar>
        <div
          class="text-sub one-line-text q-ml-xs"
          style="max-width:80%"
        >{{ audio.creatorName }} · {{ audio.createTimeHuman }}</div>
      </div>
      <div class="row items-center q-gutter-x-sm">
        <h-icon-num icon="mdi-play" :label="audio.playCount" />
        <h-icon-num icon="mdi-star" :label="audio.starCount" />
        <lang-chip :code="audio.langCode"></lang-chip>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import HIconNum from '../utils/HIconNum.vue';
import LangChip from '../LanguageChip.vue';
import Audio from 'src/models/Audio';
const props = defineProps({
  audio: {
    type: Object as PropType<Audio>,
    required: true,
  }
})
</script>
<style lang="scss" scoped>
.audio-list-item {
  width: 100%;
  height: 80px;
  background-color: #242424;
  font-size: 12px;
  .video-title {
    max-width: 100%;
  }
}
</style>
